import { HOME_URL, LOGIN_URL } from "../../../../constants";
import { Avatar, Dropdown, message, Modal } from "antd";
import { useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import InfoModal from './infoModal'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { setToken } from '../../../../store/modules/global'
import PasswordModal from './PasswordModal'
import { useDispatch } from 'react-redux'

interface ModalProps {
  showModal: (params: { name: number }) => void
}

const AvatarIcon = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const logout = () => {
    Modal.confirm({
      title: '温馨提示！',
      icon: <ExclamationCircleOutlined />,
      content: '确认退出登录吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        navigate(LOGIN_URL);
        dispatch(setToken(""));
        message.success('退出登录成功');
        window.localStorage.removeItem('persist:reduxState');
      }
    })  
  };

  const items = [
    {
      key: '1',
      label: <span className="dropdown-item">首页</span>,
      onClick: () => navigate(HOME_URL)
    },
    {
      key: '2',
      label: <span className="dropdown-item">个人信息</span>,
      onClick: () => infoRef.current!.showModal({ name: 11 })
    },
    {
      key: '3',
      label: <span className="dropdown-item">修改密码</span>,
      onClick: () => passRef.current!.showModal({ name: 11 })
    },
    // { type: 'divider' },
    {
      key: '4',
      label: <span className="dropdown-item">退出登录</span>,
      onClick: logout
    }
  ]
   const avatar = "https://p9-passport.byteacctimg.com/img/user-avatar/8336679170e145427c515b89e248c514~40x40.awebp";

  const infoRef = useRef<ModalProps>(null);
  const passRef = useRef<ModalProps>(null);
  return (
    <>
      <Dropdown menu={{items}} placement="bottom" arrow trigger={['click']}>
        <Avatar size="large" src={avatar} />
      </Dropdown>
      <InfoModal innerRef={infoRef} />
      <PasswordModal innerRef={passRef} />
    </>
  )
};

export default AvatarIcon;